<template>
  <el-container>
    <el-aside width="10rem" ref="aside" :key="key">
      <div class="aside-bar">
        <el-menu
          :default-active="myBusState"
          text-color="#747774"
          active-text-color="#013D87"
          router
        >
          <el-menu-item
            :index="myBasicInfo"
            class="aside-client"
            @click="changeMyBusState(myBasicInfo)"
          >
            <div :class="[myBusState == myBasicInfo ? 'asidelog-active' : 'asidelog']"></div>
            <div class="cient-name">{{welcomText}}</div>
          </el-menu-item>
          <keep-alive>
          <el-badge :value="auditData.audit" :hidden="!auditData.audit" type="info">
            <el-menu-item
              :index="auditing"
              :class="[myBusState == auditing ? 'audit-active' : 'audit']"
              @click="changeMyBusState(auditing)"
            >
              <i></i>
              <span slot="title">审核中</span>
            </el-menu-item>
          </el-badge>
          </keep-alive>
          <keep-alive>
          <el-badge :value="auditData.success" :hidden="!auditData.success" type="primary">
            <el-menu-item
              :index="auditwin"
              :class="[myBusState == auditwin ? 'success-active' : 'success']"
              @click="changeMyBusState(auditwin)"
            >
              <i></i>
              <span slot="title">审核成功</span>
            </el-menu-item>
          </el-badge>
          </keep-alive>
          <keep-alive>
          <el-badge :value="auditData.failure" :hidden="!auditData.failure" type="danger">
            <el-menu-item
              :index="auditlose"
              :class="[myBusState == auditlose ? 'failure-active' : 'failure']"
              @click="changeMyBusState(auditlose)"
            >
              <i></i>
              <span slot="title">审核失败</span>
            </el-menu-item>
          </el-badge>
          </keep-alive>
          <keep-alive>
            <el-badge :value="auditData.reservation" :hidden="!auditData.reservation" type="success">
              <el-menu-item
                :index="subscribeClassify"
                :class="[myBusState == subscribewin ? 'reservation-active' : 'reservation']"
                @click="changeMyBusState(subscribeClassify)"
              >
                <i></i>
                <span slot="title">预约成功</span>
              </el-menu-item>
            </el-badge>
          </keep-alive>
        </el-menu>
      </div>
    </el-aside>
    <el-main height="100%">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      // 每个状态的业务数量
      auditData: {
        audit: 0,
        success: 0,
        failure: 0,
        reservation: 0,
      },
      auditing: "/business/myBusiness/auditing",
      auditwin: "/business/myBusiness/auditwin",
      auditlose: "/business/myBusiness/auditlose",
      subscribewin: "/business/myBusiness/subscribewin",
      subscribeClassify: "/business/myBusiness/subscribeClassify",
      key: 1,
    };
  },
  methods: {
    ...mapMutations(["changeMyBusState"]),
    // 获取业务数量
    requestData() {
      this.$http("/trademark/proPublic/findByID").then(({ data: res }) => {
        if (res.code !== 200) return ////console.log("业务数据获取失败");
        res.data.forEach((val) => {
          // console.log(val.commitStatus)
          switch (val.commitStatus) {
            case 1:
              this.auditData.audit = val.count;
              break;
            case 2:
              this.auditData.success = val.count;
              break;
            case 3:
              this.auditData.failure = val.count;
              break;
            default:
              break;
          }
        });
      });
      this.$http
      .get("/trademark/order/findByUser?selectTotal=1")
      .then((res) => {
        this.auditData.reservation = res.data.data.total;
      })
    },
    // 监听路径变化修改状态
    observePath() {
      let path = location.pathname;
      this.changeMyBusState(path);
      this.key++;
    },
  },
  computed: {
    ...mapState(["myBusState"]),
    ...mapGetters(["myBasicInfo","welcomText"]),
  },
  watch: {
    '$route'(){
      this.requestData();
      console.log(this.auditData.success);
    }
  },
  created() {
    this.requestData();
    window.addEventListener("popstate", this.observePath);
  },
  beforeDestroy() {
    window.removeEventListener("popstate", this.observePath);
  },
};
</script>
<style lang="less" scoped>
.el-container {
  height: calc(100% - 4.3rem);
}
.el-main {
  height: 100%;
  overflow-y: auto;
}
.el-aside {
  background-color: #fff;
  .aside-bar {
    .el-menu {
      border: none;
      .aside-client {
        border-top: 1px solid #f1f1f1;
        height: 4.6rem;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        .asidelog {
          height: 2rem;
          width: 2rem;
          background: url(../../assets/imgs/business/head.png) no-repeat;
          background-size: cover;
        }
        .asidelog-active {
          height: 2rem;
          width: 2rem;
          background: url(../../assets/imgs/business/head-active.png) no-repeat;
          background-size: cover;
        }
        .cient-name {
          font-size: 20px;
          margin-left: 0.4rem;
        }
      }
      .el-badge {
        width: 100%;
        /deep/ sup {
          right: 40px;
          top: 50%;
        }
      }
    }
    .is-active {
      border-left: 4px solid #013d87;
      font-weight: bold;
      background-color: rgba(142, 183, 233, 0.2);
      padding-left: 16px !important;
    }
    .el-menu-item {
      height: 2.5rem;
      line-height: 2.5rem;
      font-size: 1em;
      color: #747774;
      i {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        margin-right: 0.5rem;
        vertical-align: middle;
        margin-left: 1.5rem;
      }
    }
    .audit i {
      background: url(../../assets/imgs/home/audit.png) center no-repeat;
      background-size: cover;
    }
    .audit-active i {
      background: url(../../assets/imgs/home/audit-active.png) center no-repeat;
      background-size: cover;
    }
    .success i {
      background: url(../../assets/imgs/home/success.png) center no-repeat;
      background-size: cover;
    }
    .success-active i {
      background: url(../../assets/imgs/home/success-active.png) center
        no-repeat;
      background-size: cover;
    }
    .failure i {
      background: url(../../assets/imgs/home/failure.png) center no-repeat;
      background-size: cover;
    }
    .failure-active i {
      background: url(../../assets/imgs/home/failure-active.png) center
        no-repeat;
      background-size: cover;
    }
    .reservation i {
      background: url(../../assets/imgs/home/reservation.png) center no-repeat;
      background-size: cover;
    }
    .reservation-active i {
      background: url(../../assets/imgs/home/reservation-active.png) center
        no-repeat;
      background-size: cover;
    }
  }
}
</style>